<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-10-21 16:18:14
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-10-26 19:31:59
--><van-button type="primary" block>块级元素</van-button>
<template>
  <div class="orders">
    <div style="height:200px"><img src="../../../public/logo.jpg" alt="" style="height:100%;width:100%"></div>
    <div class="user">
      <div class="header">
      <div class="logo" >
        <img :src="user_info.userFace" alt="" style="height:100%;width:100%">
      </div>
    
        <div class="name">
           <span style="font-size:30px">您好! </span>{{user_info.realname}}
        </div>
      
    </div>

    <div>
       <div class="options">

      <div class="option" @click="$router.push('/home/orders')">
        <div class="name">
         
          <span> <van-icon name="todo-list-o" />我的订单</span>
        </div>
        <div class="right">
          <i class="iconfont icon-right"></i>
        </div>
      </div>
      <div class="option">
        <div class="name">
          
          <span> <van-icon name="contact" />帮助中心</span>
        </div>
        <div class="right">
          <i class="iconfont icon-right"></i>
        </div>
      </div>
      <div class="option"  @click="logoutHandler">
        <div class="name">
          
          <span> <van-icon name="close" />退出</span>
        </div>
        <div class="right">
          <i class="iconfont icon-right"></i>
        </div>
      </div>
    </div>
  </div>
    


    </div>
    <!-- <van-button type="danger" size="large" @click="logoutHandler" block>点击呼叫服务员买单，欢迎下次光临</van-button> -->
  </div>
</template>
<script>
import {useRouter} from 'vue-router'
import {computed,onMounted,ref} from 'vue'
import {useStore} from 'vuex'

export default {
  setup() {
    let router = useRouter();
    let store = useStore();
    let user_info = computed(()=> store.state.user.user_info )


    let logoutHandler = ()=>{
      localStorage.removeItem('token');
      router.push('/login');  
    }

    return {
      logoutHandler,
      user_info
    }
  },
}

</script>
<style lang="scss" scoped>
.orders{
  position: relative;
}
.user{
  width: 90%;
  background: white;
  height: 500px;
  border-radius: 15px;
  position: absolute;
  top:165px;
  left:20px;
  .header{
    color: red;
    .logo{
      height:75px;
      width:75px;
      border: radius 15px;; 
      overflow:hidden;
      padding: 20px;
      float: left;

    }
    .name{
    float: left;
    padding-top: 50px;
    color: #000;
    font-size: 20px;
    font-weight: bold;
    span{
      font-weight: bold;
      color: rgb(214, 57, 57);
      
    }

  }
  }

}
.header::after{
  display: block;
  content: '';
  clear: both;
}
.option{
  font-size: 20px;
  margin: 10px 0 10 20px;
}
 
</style>